رندر در React: رندر کامپوننت و مدیریت چرخه حیات

React، یک کتابخانه محبوب جاوا اسکریپت برای ساخت رابط‌های کاربری، به فرآیند رندرینگ کارآمدی برای نمایش و به‌روزرسانی کامپوننت‌ها متکی است. درک اینکه React چگونه کامپوننت‌ها را رندر می‌کند، چرخه‌های حیات آنها را مدیریت می‌کند و کارایی را بهینه می‌سازد، برای ساخت برنامه‌های قدرتمند و مقیاس‌پذیر حیاتی است. این راهنمای جامع این مفاهیم را با جزئیات، همراه با مثال‌های عملی و بهترین شیوه‌ها برای توسعه‌دهندگان در سراسر جهان بررسی می‌کند.

درک فرآیند رندرینگ در React

هسته عملیات React در معماری مبتنی بر کامپوننت و DOM مجازی آن نهفته است. هنگامی که state یا props یک کامپوننت تغییر می‌کند، React مستقیماً DOM واقعی را دستکاری نمی‌کند. در عوض، یک نمایش مجازی از DOM به نام DOM مجازی (Virtual DOM) ایجاد می‌کند. سپس، React این DOM مجازی را با نسخه قبلی مقایسه کرده و حداقل مجموعه تغییرات لازم برای به‌روزرسانی DOM واقعی را شناسایی می‌کند. این فرآیند که به آن «تطبیق» (reconciliation) گفته می‌شود، به طور قابل توجهی کارایی را بهبود می‌بخشد.

DOM مجازی و تطبیق (Reconciliation)

DOM مجازی یک نمایش سبک و درون حافظه‌ای (in-memory) از DOM واقعی است. دستکاری آن بسیار سریع‌تر و کارآمدتر از DOM واقعی است. هنگامی که یک کامپوننت به‌روز می‌شود، React یک درخت DOM مجازی جدید ایجاد کرده و آن را با درخت قبلی مقایسه می‌کند. این مقایسه به React اجازه می‌دهد تا تعیین کند کدام گره‌های خاص در DOM واقعی نیاز به به‌روزرسانی دارند. سپس React این به‌روزرسانی‌های حداقلی را روی DOM واقعی اعمال می‌کند که منجر به فرآیند رندر سریع‌تر و با کارایی بالاتر می‌شود.

این مثال ساده را در نظر بگیرید:

سناریو: کلیک روی یک دکمه، شمارنده‌ای را که روی صفحه نمایش داده می‌شود، به‌روز می‌کند.

بدون React: هر کلیک ممکن است باعث یک به‌روزرسانی کامل DOM شود و کل صفحه یا بخش‌های بزرگی از آن را دوباره رندر کند، که منجر به عملکرد کند می‌شود.

با React: فقط مقدار شمارنده در DOM مجازی به‌روز می‌شود. فرآیند تطبیق این تغییر را شناسایی کرده و آن را به گره مربوطه در DOM واقعی اعمال می‌کند. بقیه صفحه بدون تغییر باقی می‌ماند و در نتیجه یک تجربه کاربری روان و پاسخگو ایجاد می‌شود.

چگونه React تغییرات را تشخیص می‌دهد: الگوریتم مقایسه (Diffing)

الگوریتم مقایسه (diffing) React قلب فرآیند تطبیق است. این الگوریتم درخت‌های DOM مجازی جدید و قدیمی را برای شناسایی تفاوت‌ها مقایسه می‌کند. الگوریتم برای بهینه‌سازی مقایسه چندین فرض را در نظر می‌گیرد:

• دو المان با نوع‌های مختلف، درخت‌های متفاوتی تولید خواهند کرد. اگر المان‌های ریشه انواع متفاوتی داشته باشند (مثلاً تغییر <div> به <span>)، React درخت قدیمی را از بین برده و درخت جدید را از ابتدا می‌سازد.
• هنگام مقایسه دو المان از یک نوع، React به ویژگی‌های (attributes) آنها نگاه می‌کند تا تغییرات را تشخیص دهد. اگر فقط ویژگی‌ها تغییر کرده باشند، React ویژگی‌های گره DOM موجود را به‌روز می‌کند.
• React از یک prop به نام key برای شناسایی منحصر به فرد آیتم‌های لیست استفاده می‌کند. ارائه prop کلید به React اجازه می‌دهد تا لیست‌ها را بدون رندر مجدد کل لیست به طور کارآمد به‌روز کند.

درک این فرضیات به توسعه‌دهندگان کمک می‌کند تا کامپوننت‌های React کارآمدتری بنویسند. به عنوان مثال، استفاده از کلیدها هنگام رندر لیست‌ها برای کارایی حیاتی است.

چرخه حیات کامپوننت React

کامپوننت‌های React یک چرخه حیات مشخص دارند که شامل مجموعه‌ای از متدهاست که در نقاط خاصی از وجود یک کامپوننت فراخوانی می‌شوند. درک این متدهای چرخه حیات به توسعه‌دهندگان اجازه می‌دهد تا نحوه رندر، به‌روزرسانی و حذف کامپوننت‌ها را کنترل کنند. با معرفی هوک‌ها، متدهای چرخه حیات هنوز هم مرتبط هستند و درک اصول زیربنایی آنها مفید است.

متدهای چرخه حیات در کامپوننت‌های کلاسی

در کامپوننت‌های مبتنی بر کلاس، متدهای چرخه حیات برای اجرای کد در مراحل مختلف زندگی یک کامپوننت استفاده می‌شوند. در اینجا مروری بر متدهای کلیدی چرخه حیات آورده شده است:

• constructor(props): قبل از mount شدن کامپوننت فراخوانی می‌شود. برای مقداردهی اولیه state و اتصال event handlerها استفاده می‌شود.
• static getDerivedStateFromProps(props, state): قبل از رندر، هم در mount اولیه و هم در به‌روزرسانی‌های بعدی، فراخوانی می‌شود. باید یک شی برای به‌روزرسانی state یا null را برای نشان دادن اینکه props جدید نیازی به به‌روزرسانی state ندارند، برگرداند. این متد به‌روزرسانی‌های قابل پیش‌بینی state را بر اساس تغییرات props ترویج می‌دهد.
• render(): متد الزامی که JSX را برای رندر برمی‌گرداند. باید یک تابع خالص از props و state باشد.
• componentDidMount(): بلافاصله پس از mount شدن کامپوننت (درج در درخت) فراخوانی می‌شود. جای خوبی برای انجام side effectها مانند دریافت داده یا تنظیم اشتراک‌ها (subscriptions) است.
• shouldComponentUpdate(nextProps, nextState): قبل از رندر هنگام دریافت props یا state جدید فراخوانی می‌شود. به شما امکان می‌دهد با جلوگیری از رندرهای غیرضروری، کارایی را بهینه کنید. باید true را در صورت نیاز به به‌روزرسانی کامپوننت و false را در غیر این صورت برگرداند.
• getSnapshotBeforeUpdate(prevProps, prevState): درست قبل از به‌روزرسانی DOM فراخوانی می‌شود. برای ثبت اطلاعات از DOM (مثلاً موقعیت اسکرول) قبل از تغییر آن مفید است. مقدار بازگشتی به عنوان پارامتر به componentDidUpdate() منتقل می‌شود.
• componentDidUpdate(prevProps, prevState, snapshot): بلافاصله پس از وقوع یک به‌روزرسانی فراخوانی می‌شود. جای خوبی برای انجام عملیات DOM پس از به‌روزرسانی یک کامپوننت است.
• componentWillUnmount(): بلافاصله قبل از unmount و تخریب یک کامپوننت فراخوانی می‌شود. جای خوبی برای پاکسازی منابع، مانند حذف event listenerها یا لغو درخواست‌های شبکه است.
• static getDerivedStateFromError(error): پس از یک خطا در حین رندر فراخوانی می‌شود. خطا را به عنوان آرگومان دریافت می‌کند و باید مقداری را برای به‌روزرسانی state برگرداند. این متد به کامپوننت اجازه می‌دهد تا یک UI جایگزین (fallback) نمایش دهد.
• componentDidCatch(error, info): پس از یک خطا در حین رندر در یک کامپوننت فرزند فراخوانی می‌شود. خطا و اطلاعات پشته کامپوننت را به عنوان آرگومان دریافت می‌کند. جای خوبی برای ثبت خطاها در یک سرویس گزارش‌دهی خطا است.

مثالی از عملکرد متدهای چرخه حیات

کامپوننتی را در نظر بگیرید که هنگام mount شدن، داده‌ها را از یک API دریافت می‌کند و با تغییر props خود، داده‌ها را به‌روز می‌کند:

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.url !== prevProps.url) {
      this.fetchData();
    }
  }

  fetchData = async () => {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  render() {
    if (!this.state.data) {
      return <p>Loading...</p>;
    }

    return <div>{this.state.data.message}</div>;
  }
}

در این مثال:

• componentDidMount() داده‌ها را هنگام اولین mount شدن کامپوننت دریافت می‌کند.
• componentDidUpdate() در صورت تغییر prop url دوباره داده‌ها را دریافت می‌کند.
• متد render() یک پیام بارگذاری را در حین دریافت داده‌ها نمایش می‌دهد و سپس پس از در دسترس بودن داده‌ها، آنها را رندر می‌کند.

متدهای چرخه حیات و مدیریت خطا

React همچنین متدهای چرخه حیات برای مدیریت خطاهایی که در حین رندر رخ می‌دهند، فراهم می‌کند:

• static getDerivedStateFromError(error): پس از وقوع یک خطا در حین رندر فراخوانی می‌شود. خطا را به عنوان آرگومان دریافت می‌کند و باید مقداری را برای به‌روزرسانی state برگرداند. این به کامپوننت اجازه می‌دهد تا یک UI جایگزین (fallback) نمایش دهد.
• componentDidCatch(error, info): پس از وقوع یک خطا در حین رندر در یک کامپوننت فرزند فراخوانی می‌شود. خطا و اطلاعات پشته کامپوننت را به عنوان آرگومان دریافت می‌کند. این مکان خوبی برای ثبت خطاها در یک سرویس گزارش‌دهی خطا است.

این متدها به شما اجازه می‌دهند تا خطاها را به درستی مدیریت کرده و از کرش کردن برنامه خود جلوگیری کنید. به عنوان مثال، می‌توانید از getDerivedStateFromError() برای نمایش یک پیام خطا به کاربر و از componentDidCatch() برای ثبت خطا در سرور استفاده کنید.

هوک‌ها و کامپوننت‌های تابعی

هوک‌های React که در React 16.8 معرفی شدند، راهی برای استفاده از state و سایر ویژگی‌های React در کامپوننت‌های تابعی فراهم می‌کنند. در حالی که کامپوننت‌های تابعی متدهای چرخه حیات را به همان شکل کامپوننت‌های کلاسی ندارند، هوک‌ها عملکرد معادل را ارائه می‌دهند.

• useState(): به شما امکان می‌دهد state را به کامپوننت‌های تابعی اضافه کنید.
• useEffect(): به شما امکان می‌دهد side effectها را در کامپوننت‌های تابعی انجام دهید، مشابه componentDidMount()، componentDidUpdate() و componentWillUnmount().
• useContext(): به شما امکان دسترسی به context در React را می‌دهد.
• useReducer(): به شما امکان می‌دهد state پیچیده را با استفاده از یک تابع reducer مدیریت کنید.
• useCallback(): یک نسخه memoized از یک تابع را برمی‌گرداند که فقط در صورت تغییر یکی از وابستگی‌ها، تغییر می‌کند.
• useMemo(): یک مقدار memoized را برمی‌گرداند که فقط زمانی که یکی از وابستگی‌ها تغییر کرده باشد، دوباره محاسبه می‌شود.
• useRef(): به شما اجازه می‌دهد مقادیر را بین رندرها حفظ کنید.
• useImperativeHandle(): مقدار نمونه‌ای را که هنگام استفاده از ref به کامپوننت‌های والد نمایش داده می‌شود، سفارشی می‌کند.
• useLayoutEffect(): نسخه‌ای از useEffect است که به صورت همزمان (synchronously) پس از تمام تغییرات DOM اجرا می‌شود.
• useDebugValue(): برای نمایش یک مقدار برای هوک‌های سفارشی در React DevTools استفاده می‌شود.

مثالی از هوک useEffect

در اینجا نحوه استفاده از هوک useEffect() برای دریافت داده در یک کامپوننت تابعی آورده شده است:

import React, { useState, useEffect } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, [url]); // اثر (effect) را فقط در صورت تغییر URL دوباره اجرا کن

  if (!data) {
    return <p>Loading...</p>;
  }

  return <div>{data.message}</div>;
}

در این مثال:

• useEffect() داده‌ها را هنگام اولین رندر کامپوننت و هر زمان که prop url تغییر کند، دریافت می‌کند.
• آرگومان دوم به useEffect() یک آرایه از وابستگی‌ها است. اگر هر یک از وابستگی‌ها تغییر کند، اثر دوباره اجرا خواهد شد.
• هوک useState() برای مدیریت state کامپوننت استفاده می‌شود.

بهینه‌سازی کارایی رندر در React

رندر کارآمد برای ساخت برنامه‌های React با کارایی بالا حیاتی است. در اینجا چند تکنیک برای بهینه‌سازی کارایی رندر آورده شده است:

۱. جلوگیری از رندرهای غیرضروری

یکی از مؤثرترین راه‌ها برای بهینه‌سازی کارایی رندر، جلوگیری از رندرهای غیرضروری است. در اینجا چند تکنیک برای جلوگیری از رندر مجدد آورده شده است:

• استفاده از React.memo(): React.memo() یک کامپوننت مرتبه بالاتر است که یک کامپوننت تابعی را memoize می‌کند. این کامپوننت فقط در صورتی دوباره رندر می‌شود که props آن تغییر کرده باشد.
• پیاده‌سازی shouldComponentUpdate(): در کامپوننت‌های کلاسی، می‌توانید متد چرخه حیات shouldComponentUpdate() را برای جلوگیری از رندر مجدد بر اساس تغییرات prop یا state پیاده‌سازی کنید.
• استفاده از useMemo() و useCallback(): این هوک‌ها می‌توانند برای memoize کردن مقادیر و توابع استفاده شوند و از رندرهای غیرضروری جلوگیری کنند.
• استفاده از ساختارهای داده تغییرناپذیر (immutable): ساختارهای داده تغییرناپذیر تضمین می‌کنند که تغییرات در داده‌ها اشیاء جدیدی ایجاد می‌کنند به جای تغییر اشیاء موجود. این کار تشخیص تغییرات و جلوگیری از رندرهای غیرضروری را آسان‌تر می‌کند.

۲. تقسیم کد (Code-Splitting)

تقسیم کد فرآیند تقسیم برنامه شما به قطعات کوچکتر است که می‌توانند بر حسب تقاضا بارگیری شوند. این کار می‌تواند زمان بارگذاری اولیه برنامه شما را به طور قابل توجهی کاهش دهد.

React چندین راه برای پیاده‌سازی تقسیم کد فراهم می‌کند:

• استفاده از React.lazy() و Suspense: این ویژگی‌ها به شما اجازه می‌دهند تا کامپوننت‌ها را به صورت پویا وارد کنید و آنها را فقط در صورت نیاز بارگیری کنید.
• استفاده از واردات پویا (dynamic imports): شما می‌توانید از واردات پویا برای بارگیری ماژول‌ها بر حسب تقاضا استفاده کنید.

۳. مجازی‌سازی لیست (List Virtualization)

هنگام رندر لیست‌های بزرگ، رندر کردن همه آیتم‌ها به یکباره می‌تواند کند باشد. تکنیک‌های مجازی‌سازی لیست به شما اجازه می‌دهند فقط آیتم‌هایی را که در حال حاضر روی صفحه قابل مشاهده هستند، رندر کنید. با اسکرول کردن کاربر، آیتم‌های جدید رندر شده و آیتم‌های قدیمی unmount می‌شوند.

چندین کتابخانه وجود دارد که کامپوننت‌های مجازی‌سازی لیست را ارائه می‌دهند، مانند:

• react-window
• react-virtualized

۴. بهینه‌سازی تصاویر

تصاویر اغلب می‌توانند منبع قابل توجهی از مشکلات کارایی باشند. در اینجا چند نکته برای بهینه‌سازی تصاویر آورده شده است:

• استفاده از فرمت‌های بهینه تصویر: از فرمت‌هایی مانند WebP برای فشرده‌سازی و کیفیت بهتر استفاده کنید.
• تغییر اندازه تصاویر: تصاویر را به ابعاد مناسب برای اندازه نمایش آنها تغییر دهید.
• بارگذاری تنبل (Lazy load) تصاویر: تصاویر را فقط زمانی که روی صفحه قابل مشاهده هستند، بارگیری کنید.
• استفاده از CDN: از یک شبکه تحویل محتوا (CDN) برای ارائه تصاویر از سرورهایی که از نظر جغرافیایی به کاربران شما نزدیک‌تر هستند، استفاده کنید.

۵. پروفایلینگ و اشکال‌زدایی

React ابزارهایی برای پروفایلینگ و اشکال‌زدایی کارایی رندر فراهم می‌کند. React Profiler به شما امکان می‌دهد کارایی رندر را ضبط و تحلیل کنید و کامپوننت‌هایی را که باعث گلوگاه‌های کارایی می‌شوند، شناسایی کنید.

افزونه مرورگر React DevTools ابزارهایی برای بازرسی کامپوننت‌ها، state و props در React فراهم می‌کند.

مثال‌های عملی و بهترین شیوه‌ها

مثال: Memoizing یک کامپوننت تابعی

یک کامپوننت تابعی ساده را در نظر بگیرید که نام یک کاربر را نمایش می‌دهد:

function UserProfile({ user }) {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
}

برای جلوگیری از رندر غیرضروری این کامپوننت، می‌توانید از React.memo() استفاده کنید:

import React from 'react';

const UserProfile = React.memo(({ user }) => {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
});

اکنون، UserProfile فقط در صورتی دوباره رندر می‌شود که prop user تغییر کند.

مثال: استفاده از useCallback()

کامپوننتی را در نظر بگیرید که یک تابع callback را به یک کامپوننت فرزند منتقل می‌کند:

import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

در این مثال، تابع handleClick در هر رندر ParentComponent دوباره ایجاد می‌شود. این باعث می‌شود ChildComponent به طور غیرضروری دوباره رندر شود، حتی اگر props آن تغییر نکرده باشد.

برای جلوگیری از این مشکل، می‌توانید از useCallback() برای memoize کردن تابع handleClick استفاده کنید:

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // تابع را فقط در صورت تغییر count دوباره ایجاد کن

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

اکنون، تابع handleClick فقط در صورتی دوباره ایجاد می‌شود که state count تغییر کند.

مثال: استفاده از useMemo()

کامپوننتی را در نظر بگیرید که یک مقدار مشتق شده را بر اساس props خود محاسبه می‌کند:

import React, { useState } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item => item.name.includes(filter));

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

در این مثال، آرایه filteredItems در هر رندر MyComponent دوباره محاسبه می‌شود، حتی اگر prop items تغییر نکرده باشد. اگر آرایه items بزرگ باشد، این می‌تواند ناکارآمد باشد.

برای جلوگیری از این مشکل، می‌توانید از useMemo() برای memoize کردن آرایه filteredItems استفاده کنید:

import React, { useState, useMemo } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]); // فقط در صورت تغییر items یا filter دوباره محاسبه کن

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

اکنون، آرایه filteredItems فقط در صورتی دوباره محاسبه می‌شود که prop items یا state filter تغییر کند.

نتیجه‌گیری

درک فرآیند رندر React و چرخه حیات کامپوننت برای ساخت برنامه‌های با کارایی بالا و قابل نگهداری ضروری است. با استفاده از تکنیک‌هایی مانند memoization، تقسیم کد و مجازی‌سازی لیست، توسعه‌دهندگان می‌توانند کارایی رندر را بهینه کرده و یک تجربه کاربری روان و پاسخگو ایجاد کنند. با معرفی هوک‌ها، مدیریت state و side effectها در کامپوننت‌های تابعی ساده‌تر شده و انعطاف‌پذیری و قدرت توسعه با React را بیشتر کرده است. چه در حال ساخت یک برنامه وب کوچک باشید و چه یک سیستم سازمانی بزرگ، تسلط بر مفاهیم رندر React به طور قابل توجهی توانایی شما را در ایجاد رابط‌های کاربری با کیفیت بالا بهبود می‌بخشد.

منابع بیشتر

• مستندات React در مورد رندر کردن المان‌ها
• مستندات React در مورد State و چرخه حیات
• مستندات React در مورد هوک‌ها
• مستندات React در مورد بهینه‌سازی کارایی